<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>周边检索</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style type="text/css">
        #result {
            margin: 0;
            padding: 0;
            z-index: 999;
            position: absolute;
            background-color: white;
            max-height: 100%;
            overflow-y: auto;
            top: 0;
            right: 0;
            width: 280px;
        }
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
        .jgsearch:hover {
        }

        .jselect a, input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], textarea {
            min-height: 20px;
            padding: 3px;
            font-size: 13px;
            color: #333;
            vertical-align: middle;
            text-indent: 3px;
            outline: none;
        }

        .jgsearch .btn_box {
            background: #0091ff url(https://yuntu.amap.com/datamanager/build/a170e9dfb8a172926f43f0960c1fa0fd.png) 50% no-repeat;
            height: 30px;
            display: inline-block;
            cursor: pointer;
        }

        .btn_box{
            float: right;
            float: left;
            z-index: 999;
            left:45%;
            width:40px;
            text-align: center;
            float: left;
            border-radius: 0 4px 4px 0;
            -webkit-border-radius: 0 4px 4px 0;
            -ms-border-radius: 0 4px 4px 0;
            -o-border-radius: 0 4px 4px 0;
            -moz-border-radius: 0 4px 4px 0;
        }
        .jgsearch {
            float: right;
            width: 375px;
            position: fixed;
            z-index: 999;
            left:41%;
            height:30px;
            top: 10px;
            text-align: center;
            height: 30px;
            display: inline-block;
            vertical-align: top;
            background:transparent;
        }
        #jgsearch {
            width: 275px;
            border: 1px solid #fff;
            background: #fff;
            height: 30px;
            box-shadow: none;
            border-right: 0;
            border-radius: 4px 0 0 4px;
            -webkit-border-radius: 4px 0 0 4px;
            -ms-border-radius: 4px 0 0 4px;
            -o-border-radius: 4px 0 0 4px;
            -moz-border-radius: 4px 0 0 4px;
            border:1px solid rgba(0,0,0,.25);
            float: left;
        }
    </style>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=c4fa9a11ca1d1434417fb56cbc7714f7"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="jgsearch">
    <div class="input_box">
        <input id="jgsearch" type="text" value="" placeholder="输入关键字搜索" autocomplete="off"><a></a>
        <div class="btn_box" onclick="keyword()"><a></a></div>
    </div>
</div>
<div id="container" class="map"></div>
<div id="result"></div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 12
    });
    var search;
    var searchOptions = {
        map: map,
        panel: 'result',
        keywords: '',
        pageSize: 20,
        orderBy: '_id:ASC'
    };
    //加载CloudDataSearch服务插件
    AMap.plugin(["AMap.CloudDataSearch"], function() {
        search = new AMap.CloudDataSearch('5c46c54dafdf5202ac208953', searchOptions); //构造云数据检索类
        search.searchByDistrict('厦门市');
    });

    //搜索
    function keyword(){
        var keyword = '';
        if($("#jgsearch").val() !=''){
            keyword=$("#jgsearch").val();
        }else {
            keyword='';
        }

        var searchOptions = {
            map: map,
            panel: 'result',
            keywords: keyword,
            pageSize: 20,
            orderBy: '_id:ASC'
        };
        //加载CloudDataSearch服务插件
        AMap.plugin(["AMap.CloudDataSearch"], function() {
            search = new AMap.CloudDataSearch('5c46c54dafdf5202ac208953', searchOptions); //构造云数据检索类
            search.searchByDistrict('厦门市');
        });
    }

</script>
</body>
</html>